<template>
    <article-information-heade/>    
    <!-- 文章列表 -->
    <div class="forum-container">
        <div class="user-profile">
    <!-- 用户信息 -->
    <div class="user-info">
      <img src="../../public/log.png" alt="用户头像" class="user-avatar" />
      <div class="user-details">
        <h2>{{ userInfo.nickname }}@{{ userInfo.username }}</h2>
        <p>{{ userInfo.introduction }}</p>
        <div class="user-stats">
          <span>总访问量：{{ userInfo.visitCount }}</span>
          <span>原创：{{ userInfo.articleCount }}</span>
          <span>粉丝：{{ userInfo.followerCount }}</span>
          <span>关注：{{ userInfo.followingCount }}</span>
        </div>
        <p>加入时间：{{ formatDate(userInfo.createTime) }}</p>
        <p>个人简介：{{userInfo.remark}}</p>
      </div>
    </div>
        <div v-for="post in posts" :key="post.id" class="post-item" @click="handlePostClick(post.id)">
            <h3>{{ post.title }}</h3>
            <p v-if="post.remark">{{ post.remark }}</p>
            <p v-else><em>暂无内容</em></p>
            <div class="post-meta"> 
                <span style="display: flex; align-items: center;"><el-icon style="margin-right: 3px;">
                        <View />
                    </el-icon>浏览数：{{ post.visitCount }}</span> |
                <span style="display: flex; align-items: center;"><el-icon style="margin-right: 3px;">
                        <Star />
                    </el-icon>点赞数：{{ post.likeCount }}</span> |
                <span style="display: flex; align-items: center;"><el-icon style="margin-right: 3px;">
                        <Timer />
                    </el-icon>发布时间：{{ post.createTime }}</span> |
                <span style="display: flex; align-items: center;">更多<el-icon style="margin-left: 3px;">
                        <More />
                    </el-icon></span>

            </div>
        </div>

        <!-- 加载触发元素 -->
        <div ref="loader" class="loader">
            <!-- 使用Element Plus加载组件 -->
            <el-skeleton v-if="isLoading" :rows="5" animated />
            <!-- <el-skeleton v-if="isLoading && ifFirstLoad" :rows="3" animated style="margin-top: 20px;" />
            <el-skeleton v-if="isLoading && ifFirstLoad" :rows="5" animated style="margin-top: 20px;" />
            <el-skeleton v-if="isLoading && ifFirstLoad" :rows="2" animated style="margin-top: 20px;" /> -->

            <!-- 加载完成提示 -->
            <div v-if="noMoreData" class="no-more">
                <el-divider>
                    <el-icon>
                        <Finished />
                    </el-icon>
                    <span>已经到底啦</span>
                </el-divider>
            </div>

            <!-- 错误提示 -->
            <div v-if="isError" class="error-container">
                <el-alert title="加载失败" type="error" :closable="false" show-icon>
                    <template #default>
                        <el-button type="primary" size="small" @click="retry">重新加载</el-button>
                    </template>
                </el-alert>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfo } from '../api/userApi'
import { getArticlesByUserId } from '../api/articlesApi'
import { useRoute } from 'vue-router'
import ArticleInformationHeade from './ArticleInformationHeade.vue'

const route = useRoute()
const userId = route.params.id

const userInfo = ref({
  avatarUrl: '',
  nickname: '',
  introduction: '',
  visitCount: 0,
  originalCount: 0,
  followerCount: 0,
  followingCount: 0,
  joinTime: ''
})

const articles = ref([])
const posts = ref([]);

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}

const fetchUserInfo = async () => {
    console.log(userId);
    
  const data = await getUserInfo(userId)
  userInfo.value = data
}

const fetchUserArticles = async () => {
  const data = await getArticlesByUserId(userId)
// const data = null
    posts.value = data
  console.log(posts);
  
}

onMounted(async () => {
  await fetchUserInfo()
  await fetchUserArticles()
})
</script>

<style scoped>
.user-profile {
  padding: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  /* margin-left: auto; */
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.user-details h2 {
  font-size: 24px;
  margin: 0;
}

.user-details p {
  margin: 5px 0;
}

.user-stats {
  margin: 10px 0;
}

.user-stats span {
  margin-right: 15px;
}

.user-articles h3 {
  font-size: 20px;
  margin-bottom: 10px;
  margin-left: 50px;
}

.user-articles ul {
  list-style: none;
  padding: 0;
}

.user-articles li {
  margin-bottom: 15px;
}

.user-articles h4 {
  font-size: 18px;
  margin: 0;
}

.user-articles a {
  text-decoration: none;
  color: inherit;
}

.user-articles a:hover {
  text-decoration: underline;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    /* 可选：自动换行 */
    align-items: center;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    gap: 10px;
    /* 设置项目之间的间距 */
}

.forum-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.post-item {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.loader {
    margin-top: 20px;
    padding: 20px;
}

.no-more {
    text-align: center;
    color: #909399;
    font-size: 14px;
}

.no-more .el-icon {
    margin-right: 8px;
    vertical-align: middle;
}

.error-container {
    margin: 20px 0;
}
</style>